<template>
  <a-drawer
      v-model:open="isShow"
      class="custom-class"
      title="字典列表"
      size="large"
      placement="right"
      @close="close"
  >
    <a-card>
      <common-search :col-layout="{xxl: 8, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"/>
      <a-button type="primary" @click="add">新增</a-button>
      <common-table
          :columns="columns"
          :dataSource="dataList"
          v-model:localPagination="page"
          @paginationChange="onPageChange"
          :slots="['action']"
          v-model:loading="loading"
      >
        <template #action="{ record }">
          <div class="table-btn">
            <a-button type="link" @click="edit(record)">编辑</a-button>
            <a-divider type="vertical" />
            <a-popconfirm
                title="是否要删除?"
                ok-text="是"
                cancel-text="否"
                @confirm="delOne(record)"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </common-table>
    </a-card>
  </a-drawer>
  <add-dictionary-item :openAddItem="openAddItem" :dictId="id" @close="closeAddItem"/>
  <edit-dictionary-item :openEditItem="openEditItem" :records="records" :dictId="id" @close="closeEditItem"/>
</template>
<script setup>
import { computed, ref,watch } from 'vue'
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {deleteDict, getDictItemList} from "@/api/system/dict.js";
import AddDictionaryItem from "@/components/modal/addDictionaryItem.vue";
import EditDictionaryItem from "@/components/modal/editDictionaryItem.vue";
import {message} from "ant-design-vue";
const props = defineProps({
  openSet:{
    type:Boolean
  },
  dictId:{
    type:String,
    default:''
  }
})
const columns = [
  {
    title: '名称',
    align: "center",
    dataIndex: 'itemText',
  },
  {
    title: '数据值',
    align: "center",
    dataIndex: 'itemValue',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: "center",
  }
]
const formItems = [
  {
    label: '名称',
    field: 'itemText',
    type: 'input'
  },
  {
    label:'状态',
    field:'status',
    type:'select',
    options: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 }
    ]
  }
]
const openAddItem = ref(false)
const openEditItem = ref(false)
const records = ref({})
const emit = defineEmits(['close'])
const isShow = computed(()=>{
  return props.openSet
})
const id = ref(props.dictId)
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getDictItemList,
  queryFactory: () => ({
    order:'desc',
    dictId: id.value,
    field: "id,,itemText,itemValue,action"
  }),
  beforeSearch:()=>{
    query.value.dictId = id.value
  }
})
/**
 * 关闭抽屉
 */
const close = () => {
  emit('close')
}
/**
 * 新增字典数据
 */
const add = () => {
  openAddItem.value = true
}
/**
 * 关闭新增字典数据
 */
const closeAddItem = () => {
  openAddItem.value = false
  search()
}
/**
 * 编辑字典数据
 * @param record 字典数据
 */
const edit = (record) => {
  openEditItem.value = true
  console.log(record)
  records.value = record
}
/**
 * 关闭编辑字典数据
 */
const closeEditItem = () => {
  openEditItem.value = false
  search()
}
/**
 * 删除字典数据
 * @param record 字典数据
 */
const delOne = async (record) => {
  try{
    const res = await deleteDict(`/sys/dictItem/delete?id=${record.id}`,{})
    message.success('删除成功')
    await search()
  }catch (e){
    message.error(e)
  }
}
watch(()=>props.openSet,()=>{
  if(props.openSet){
    id.value = props.dictId
    search()
  }
})
</script>

<style scoped>

</style>
